<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <section class="banner-section"> <div class="slider"> <!-- slides --> <div class="slider__slides"> <div class="slide s--active"> <div class="slide__inner"> <div class="slider-boxes"> <h3> Rubber Floor Mats </h3> </div> <div class="slide__content"> <h2 class="slide__heading">Tailor-Made to Custom Fit Your Car</h2> </div> </div> </div> <div class="slide"> <div class="slide__inner"> <div class="slider-boxes"> <h3> Rubber Floor Mats </h3> </div> <div class="slide__content"> <h2 class="slide__heading">Available For Leading Make & Models </h2> </div> </div> </div> <div class="slide"> <div class="slide__inner"> <div class="slider-boxes"> <h3> Rubber Floor Mats </h3> </div> <div class="slide__content"> <h2 class="slide__heading"> AutoBild Award for Best Quality & Design</h2> </div> </div> </div> <div class="slide"> <div class="slide__inner"> <div class="slider-boxes"> <h3> Rubber Floor Mats </h3> </div> <div class="slide__content"> <h2 class="slide__heading">Made with Premium Odorless Rubber</h2> </div> </div> </div> <div class="slide s--prev"> <div class="slide__inner"> <div class="slider-boxes"> <h3> Rubber Floor Mats </h3> </div> <div class="slide__content"> <h2 class="slide__heading"> Get the <b><span style="font-size:50px; color:#bb0511;">R</span>ing</b> of Protection for Your Car</h2> </div> </div> </div> </div> <!-- slides end --> <div class="slider__control"> <div class="slider__control-line"></div> <div class="slider__control-line"></div> </div> <div class="slider__control slider__control--right m--right"> <div class="slider__control-line"></div> <div class="slider__control-line"></div> </div> </div> </section>

.banner-section{ overflow:hidden; } .slider { position: relative; height: 90vh; } .slider__slides { z-index: 1; position: relative; height: 100%; } .slider__control { z-index: 2; position: absolute; top: 50%; left: 5%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 50%; background: #fff; transition: background-color 0.3s; cursor: pointer; } .slider__control--right { left: 95%; } .slider__control:hover { background-color: #bb0511; } .slider__control-line { position: absolute; left: 23px; top: 50%; width: 3px; height: 14px; transform-origin: 50% 0; transform: rotate(-45deg); } .slider__control-line:nth-child(2) { transform: translateY(1px) rotate(-135deg); } .slider__control--right .slider__control-line { left: 37px; transform-origin: 1px 0; transform: rotate(45deg); } .slider__control--right .slider__control-line:nth-child(2) { transform: translateY(1px) rotate(135deg); } .slider__control-line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e2e2e2; transition: background-color 0.3s; } .slider__control:hover .slider__control-line:after { background-color: #fff; } .slider__control.a--rotation .slider__control-line:after { animation: arrowLineRotation 0.49s; } .slider__control.a--rotation .slider__control-line:nth-child(1):after { animation: arrowLineRotationRev 0.49s; } @keyframes arrowLineRotation { to { transform: rotate(180deg); } } @keyframes arrowLineRotationRev { to { transform: rotate(-180deg); } } .slide { overflow: hidden; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); border-radius: 50%; transition: clip-path 0s 0.91s; clip-path: circle(30px at 120vw 50%); } .slide.s--prev { clip-path: circle(30px at 30vw 50%); } .slide.s--active { z-index: 1; transition: clip-path 1.3s; clip-path: circle(120vmax at 120vw 50%); } .slide.s--active.s--active-prev { clip-path: circle(120vmax at 30vw 50%); } .slide:nth-child(1) .slide__inner { background-image: url("https://i.ibb.co/y8hKWz3/home-2-slide-1.jpg"); } .slide:nth-child(2) .slide__inner { background-image: url("https://i.ibb.co/z82Gxxx/home-2-slide-3.jpg"); } .slide:nth-child(3) .slide__inner { background-image: url("https://i.ibb.co/yVFBs3s/services-bg-1920x680.jpg"); } .slide:nth-child(4) .slide__inner { background-image: url("https://i.ibb.co/pbdXRrZ/car-3.jpg"); } .slide:nth-child(5) .slide__inner { background-image: url("https://i.ibb.co/ynbdHBk/bmw-x5-01.jpg"); } .slide__inner { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; margin-left: -50vw; margin-top: -50vh; background-size: cover; background-position: center center; } .slide__inner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } .slide__content { position: absolute; left: 5%; top: 50%; margin-left: -30px; margin-top: 48px; max-width: 480px; color: #fff; } .slide__heading { margin-bottom: 20px; font-size: 60px; } .slide__text { font-size: 25px; } .slide__text a { color: inherit; }

(function() { var $slides = document.querySelectorAll('.slide'); var $controls = document.querySelectorAll('.slider__control'); var numOfSlides = $slides.length; console.log(numOfSlides); var slidingAT = 1300; // sync this with scss variable var slidingBlocked = false; [].slice.call($slides).forEach(function($el, index) { var i = index + 1; $el.classList.add('slide-' + i); $el.dataset.slide = i; }); [].slice.call($controls).forEach(function($el) { $el.addEventListener('click', controlClickHandler); }); function controlClickHandler() { if (slidingBlocked) return; slidingBlocked = true; var $control = this; var isRight = $control.classList.contains('m--right'); var $curActive = document.querySelector('.slide.s--active'); var index = +$curActive.dataset.slide; (isRight) ? index++ : index--; if (index < 1) index = numOfSlides; if (index > numOfSlides) index = 1; var $newActive = document.querySelector('.slide-' + index); $control.classList.add('a--rotation'); $curActive.classList.remove('s--active', 's--active-prev'); document.querySelector('.slide.s--prev').classList.remove('s--prev'); $newActive.classList.add('s--active'); if (!isRight) $newActive.classList.add('s--active-prev'); var prevIndex = index - 1; if (prevIndex < 1) prevIndex = numOfSlides; document.querySelector('.slide-' + prevIndex).classList.add('s--prev'); setTimeout(function() { $control.classList.remove('a--rotation'); slidingBlocked = false; }, slidingAT*0.75); }; }());